<template>
  <div class="container1">
    <div class="icon-menu">
      <span
        class="icon el-icon-s-fold"
        v-if="!isCollapse"
        @click="SET_COLLAPSE(true)"
      ></span>
      <span class="icon el-icon-s-unfold" v-else @click="SET_COLLAPSE(false)"></span>
    </div>
    <div class="right-area">
      <i class="icon el-icon-full-screen" @click="toggleScreenfull"></i>
      <el-avatar :size="40" :src="user.image" v-if="user"></el-avatar>
      <el-dropdown>
        <span class="el-dropdown-link" v-if="user">
          {{ user.username ||'暂无'}}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>个人中心</el-dropdown-item>
          <el-dropdown-item @click.native="logout">安全退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
import screenfull from "screenfull";
import { createNamespacedHelpers } from "vuex";
const { mapState: mapMenusState, mapMutations: mapMenusMutations } =
  createNamespacedHelpers("menus");
const {
  mapActions: mapUserActions,
  mapState: mapUserState,
  mapMutations: mapUserMutations,
} = createNamespacedHelpers("users");

export default {
  computed: {
    ...mapMenusState(["isCollapse"]),
    ...mapUserState(["user"]),
  },
  created() {
    this.getUserInfoAsync();
  },
  methods: {
    ...mapMenusMutations(["SET_COLLAPSE",'REMVOE_MENUS','REMOVE_ROUTES']),
    ...mapUserActions(["getUserInfoAsync"]),
    ...mapUserMutations(["REMOVE_TOKEN", "REMOVE_USER_INFO"]),
    toggleScreenfull() {
      if (!screenfull.enabled) {
        this.$message({
          message: "不支持全屏",
          type: "warning",
        });
        return false;
      }
      screenfull.toggle();
    },
    logout() {
      this.$confirm("您确认要退出系统吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: '取消',
        type: 'warning'
      }).then(()=>{
          this.REMOVE_TOKEN();
          this.REMOVE_USER_INFO();
          // this.REMVOE_MENUS();
          // this.REMOVE_ROUTES();
          this.$router.replace("/login");
      }).catch(()=>{

      })
    },
  },
};
</script>

<style lang="scss" scoped>
.container1 {
  display: flex;
  height: 100%;
  justify-content: space-between;
  align-items: center;
  .icon {
    font-size: 20px;
  }
  .right-area {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 150px;
  }
}
</style>